<template>
  <div class="box-padding">
    <Button type="primary" @click="addRoleClick('add')" v-if="addButton">新增</Button>
    <Tabs :value="value" @on-click="tabClick">
      <TabPane label="通用角色" name="ROLE_TYPE_1">
        <Table border :columns="columns1" :data="data1"></Table>
      </TabPane>
      <TabPane label="专用角色" name="ROLE_TYPE_2">
        <Table border :columns="columns1" :data="data1"></Table>
      </TabPane>
    </Tabs>
    <!-- <div class="page-div">
      <Page
        :total="total"
        :page-size="parmes.pageSize"
        show-sizer
        show-elevator
        show-total
        @on-change="pageChange"
        @on-page-size-change="onPageSizeChange"
      />
    </div> -->
    <Modal v-model="modal2" width="360">
      <p
        slot="header"
        style="color:#333; text-align:center; border-bottom:none !important;"
      >
        <span>删除提醒</span>
      </p>
      <div style="text-align:center;border:none !important;">
        确认要删除此项内容吗？
      </div>
      <div slot="footer" style="text-align:center;border:none !important;">
        <Button shape="circle" @click="modal2 = !modal2">取消</Button>
        <Button shape="circle" type="error" @click="removeClick">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'RoleManagement',
  data() {
    return {
      modal2: false,
      value: 'ROLE_TYPE_1',
      columns1: [
        {
          title: '序号',
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              params.index +1
            )
          }
        },
        {
          title: '角色名称',
          align: 'center',
          key: 'name'
        },
        {
          title: '适应范围',
          align: 'center',
          key: 'scopeName'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                    size: 'small',
                    ghost: true
                  },
                  style: {
                    marginRight: '5px',
                    color: '#2d8cf0',
                    display:(this.editButton === true)?'inline-block':'none'
                  },
                  on: {
                    click: () => {
                      this.addRoleClick('edit', params.index)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                    size: 'small',
                    ghost: true
                  },
                  style: {
                    marginRight: '5px',
                    color: '#2d8cf0',
                    display:(this.detailButton === true)?'inline-block':'none'
                  },
                  on: {
                    click: () => {
                      this.addRoleClick('details', params.index)
                    }
                  }
                },
                '详情'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                    size: 'small',
                    ghost: true
                  },
                  style: {
                    color: '#2d8cf0',
                    display:(this.delButton === true)?'inline-block':'none'
                  },
                  on: {
                    click: () => {
                      this.removeBox(params.index)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data1: [],
      parmes: {
        whereMap: {
          type: 'ROLE_TYPE_1'
        }
      },
      total: 0,
      deleteIndex: '',
      userInfo: JSON.parse(localStorage.getItem('userList')),//当前登录用户身份
      buttonList: localStorage.getItem('buttonList'), //按钮权限
      addButton:false,//新增按钮
      editButton: false, //编辑按钮
      detailButton: false, //详情按钮
      delButton: false, //删除按钮
    }
  },
  mounted() {
    this.getButtonStatus() //按钮权限
    this.dictTypeCode()
    //根据用户身份判断按钮操作权限
    if(this.value === 'ROLE_TYPE_1'){
      if(this.userInfo.userInOrgType === 'ROOT_ENTERPRISE_USER'){
        this.addButton = true
      }else{
        this.addButton = true
        this.editButton = false
        this.delButton = false
      }
    }
    
  },
  methods: {
    

    //获取按钮权限
        getButtonStatus() {
            let path = this.$route.name
            JSON.parse(this.buttonList).forEach((item, index) => {
                if (Object.keys(item)[0] == path) {
                    this.button = item[path];
                }
            })
            this.button.forEach(val => {
                if (val.code == "P_0503_01") {
                    this.addButton = true;
                } else if (val.code == "P_0503_02") {
                    this.editButton = true
                } else if (val.code == "P_0503_03") {
                    this.delButton = true
                }else if (val.code == "P_0503_04") {
                    this.detailButton = true
                } 
            })
        },
    // 切换
    tabClick(value) {
      this.value = value
      if(this.value === 'ROLE_TYPE_1'){
        if(this.userInfo.userInOrgType === 'ROOT_ENTERPRISE_USER'){
          this.addButton = true
        }else{
          this.addButton = true
          this.editButton = false
          this.delButton = false
        }
      }else{
        this.addButton = true
        this.editButton = true
        this.delButton = true
      }
      // this.parmes.currentPage = 1
      this.parmes.whereMap.type = value
      this.dictTypeCode()
    },
    // 角色列表
    roleList(arr) {
      this.$api.roleManagement.roleList(this.parmes).then(resp => {
        if (resp.code == 200) {
          resp.data.resultObject.forEach(e => {
            arr.forEach(a => {
              if (e.scope == a.code) {
                this.$set(e, 'scopeName', a.name)
              }
            })
          })
          this.data1 = resp.data.resultObject
          this.total = resp.data.totalRecord
        }
      })
    },
    // 适用范围
    dictTypeCode() {
      this.$api.roleManagement.dictTypeCode('RANGE_APPLICATION').then(resp => {
        if (resp.code == 200) {
          let arr = []
          arr = resp.data
          this.roleList(arr)
        }
      })
    },
    // 分页页码变化
    pageChange(index) {
      this.parmes.currentPage = index
      this.dictTypeCode()
    },
    //
    onPageSizeChange(size) {
      this.parmes.pageSize = size
      this.dictTypeCode()
    },
    // 新增/编辑/详情
    addRoleClick(type, index) {
      const route = {
        name: type == 'add' ? 'role-add' : type == 'edit' ? 'role-edit' : 'role-detail',
        params:{
          type:type,
          id: type == 'add' ? 1 : this.data1[index].id,
          name:type == 'add' ? '角色新增' : type == 'edit' ? '角色编辑' : '角色详情'
        },
      }
      this.$router.push(route)
    },
    // 删除
    removeBox(index) {
      this.modal2 =  true;
      this.deleteIndex = index
    },
    removeClick() {
      this.$api.roleManagement
        .roleDetail({ id: this.data1[this.deleteIndex].id })
        .then(resp => {
          if (resp.code == 200) {
            this.$api.roleManagement.deleteRole(resp.data).then(resp => {
              if (resp.code == 200) {
                this.$Message.success('删除成功')
                this.modal2 =  false
                this.dictTypeCode()
              } else if(resp.code == 400) {
                this.modal2 = false;
                this.$Message.warning(resp.message)
              }
            })
          }else {
            this.$Message.warning(resp.message)
            this.modal2 = false;
          }
        })
    }
  }
}
</script>

<style scope>
.page-div {
  padding-top: 20px;
  width: 100%;
  text-align: center;
}
</style>
